
.main {
    padding-top: .88rem;

    .balance {
        background-image: url("/static/index/images/bg/bg_czhiyebj@2x.png");
        background-size: 100% 100%;
        padding: .5rem .47rem;
        margin: .3rem .2rem;

        .title {
            font-weight: 400;
            font-size: .24rem;
            color: var(--ff);
            margin-bottom: .25rem;
        }

        .amount {
            font-weight: 500;
            font-size: .48rem;
            color: var(--ff);
        }

        .front:before {
            content: '￥';
            font-size: .34rem;
        }
    }

    .pay_way {
        .title {
            font-weight: 500;
            font-size: .30rem;
            color: var(--dcl);
        }

        .vessel {
            gap: .2rem;
            margin-top: .25rem;

            .item {
                background: #F6F8FA;
                padding: .36rem;
                width: 33%;
                position: relative;
                box-sizing: border-box;

                .icon {
                    width: .4rem;
                    height: .4rem;
                    margin-bottom: .18rem;
                }

                & > span {
                    font-weight: 500;
                    font-size: var(--default-font-size-28);
                    color: var(--dcl);
                }
            }

            .lay-this {
                background: var(--bdc);
                border-radius: .20rem;
                border: 1px solid var(--bd);
            }

            .lay-this:after {
                content: '';
                background-image: url("/static/index/images/dui.png");
                background-size: 100% 100%;
                width: .4rem;
                height: .4rem;
                display: inline-block;
                position: absolute;
                right: -.1rem;
                top: -.1rem;
            }
        }

        .show {
            background: var(--bdc);

            .bank {
                padding: .4rem .3rem;
                display: none;

                .card-no {
                    font-weight: 500;
                    font-size: .40rem;
                    color: var(--dcl);
                    margin-bottom: .37rem;
                }

                .val {
                    font-weight: 400;
                    font-size: var(--default-font-size-26);
                    color: var(--dcl);

                    .bank-name:after {
                        content: '|';
                        color: var(--cc);
                        margin: 0 .2rem;
                    }
                }

                .copy {
                    color: var(--bd);
                    text-align: right;
                }
            }

            .qrcode {
                padding: .3rem;

                & > img {
                    width: 2rem;
                    height: auto;
                }

                & > span {
                    font-weight: 400;
                    font-size: var(--default-font-size-26);
                    color: var(--dcl);
                }
            }
        }

        .col {
            border-bottom: 1px solid var(--f6);

            .top {
                font-weight: 500;
                font-size: .3rem;
                color: var(--dcl);
                margin-bottom: .3rem;

                .icon {
                    width: .44rem;
                    height: .44rem;
                    margin-right: .1rem;
                }
            }

            .bottom {
                & > input {
                    font-size: var(--default-font-size-28);
                }
            }

            .text {
                font-weight: 400;
                font-size: var(--default-font-size-28);
                color: var(--c9);
            }
        }

        .col:last-child {
            border-bottom: none;
        }
    }
}